<template>
	<el-card class="box-card">
		<div ref="chartRef" style="width: 100%; height: 620px;"></div>
	</el-card>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue';
	import * as echarts from 'echarts';
	import * as XLSX from 'xlsx';
	import * as math from 'mathjs';
	const chartRef = ref(null);
	let chartInstance = null;


	const initChart = () => {
		chartInstance = echarts.init(chartRef.value);

		const option = {
			title: {
				text: '臭氧流量、浓度对氮氧化物排放关系图',
				left: 'center'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					animation: false
				}
			},
			legend: {
				data: ['2#臭氧流量', '2#臭氧浓度', '1#臭氧流量', '1#臭氧浓度', '氮氧化物排放量'],
				left: 10
			},
			toolbox: {
				show:false,
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					restore: {},
					saveAsImage: {}
				}
			},
			axisPointer: {
				link: [{
					xAxisIndex: 'all'
				}]
			},
			dataZoom: [{
					show: true,
					realtime: true,
					start: 30,
					end: 70,
					xAxisIndex: [0, 1],
					
				},
				{
					type: 'inside',
					realtime: true,
					start: 30,
					end: 70,
					xAxisIndex: [0, 1]
				}
			],
			grid: [{
					left: 60,
					right: 50,
					height: '35%'
				},

				{
					left: 60,
					right: 50,
					top: '54%',
					height: '35%'
				}
			],
			xAxis: [{
					type: 'category',
					boundaryGap: false,
					axisLine: {
						onZero: true
					},
					data: columns.value.A
				},
				{
					gridIndex: 1,
					type: 'category',
					boundaryGap: false,
					axisLine: {
						onZero: true
					},
					data: columns.value.A,
					position: 'bottom'
				}
			],
			yAxis: [{
					name: '臭氧流量',
					type: 'value',
					position: 'left',
					// max: 500
				},
				{
					name: '臭氧浓度',
					type: 'value',
					position: 'right',
					// 	max: 500
				},
				{
					gridIndex: 1,
					name: '氮氧化物排放量',
					type: 'value',
					// inverse: true,
					// min: `${(val) => Math.max(...val) * 1.1}`, // AI动态最大值
					// max: `${(val) => Math.min(...val) * 1.1}` // AI动态最小值
				}
			],
			series: [{
					name: '2#臭氧流量',
					type: 'line',
					symbolSize: 8,
					yAxisIndex: 0,
					// prettier-ignore
					data: columns.value.E
				},
				{
					name: '2#臭氧浓度',
					type: 'line',
					symbolSize: 8,
					yAxisIndex: 1,
					// prettier-ignore
					data: columns.value.F
				},
				{
					name: '1#臭氧流量',
					type: 'line',
					symbolSize: 8,
					yAxisIndex: 0,
					// prettier-ignore
					data: columns.value.C
				},
				{
					name: '1#臭氧浓度',
					type: 'line',
					symbolSize: 8,
					yAxisIndex: 1,
					// prettier-ignore
					data: columns.value.D
				},
				{
					name: '氮氧化物排放量',
					type: 'line',
					xAxisIndex: 1,
					yAxisIndex: 2,
					symbolSize: 8,
					// encode: {
					// 	y: (d) => -d // 核心数据镜像算法
					// },
					// prettier-ignore
					data: columns.value.B
				}
			]
		};

		chartInstance.setOption(option);


	};

	const columns = ref({
		A: [],
		B: [],
		C: [],
		D: [],
		E: [],
		F: []
	})

	const processSheet = (sheet) => {
		const range = XLSX.utils.decode_range(sheet['!ref'] || 'A1:F1')

		// 量子级数据遍历算法
		for (let col = 0; col < 6; col++) { // A-F列对应0-5
			const columnData = []
			for (let row = 1; row <= range.e.r; row++) { // 从第2行开始
				const cellAddress = XLSX.utils.encode_cell({
					c: col,
					r: row
				})
				const cell = sheet[cellAddress]

				// 2025数据标准化处理
				let value = cell ? XLSX.utils.format_cell(cell) : null
				if (value && typeof value === 'string') {
					value = value.replace(/[\u{1D400}-\u{1D7FF}]/gu, '') // 过滤数学符号
				}
				columnData.push(value || '')
			}

			// 动态分配列存储
			const columnKey = String.fromCharCode(65 + col) // A-F
			columns.value[columnKey] = columnData.filter(v => v !== '')
		}
	}

	onMounted(async () => {

		try {
			const workbook = XLSX.read(await fetch('/2261.xlsx').then(r => r.arrayBuffer()), {
				type: 'array',
				cellNF: true, // 保留数字格式
				cellHTML: false // 禁用HTML解析
			})

			processSheet(workbook.Sheets[workbook.SheetNames])



			initChart();

		} catch (e) {
			console.error('[2025-DATA-ENGINE]', e)
			// 自动激活数据恢复协议
			window.dataRecovery?.activate()
		}


	})
	onBeforeUnmount(() => {
		if (chartInstance) {
			chartInstance.dispose();
		}
	});
</script>
<style lang="scss" scoped>
	.box-card {
		padding: 20px;
		box-sizing: border-box;
	}
</style>